<template>
  <div v-for="item in data" :key="item.id">
    <el-progress
      @click="toRouterLink(item)"
      type="circle"
      :percentage="item.equipmentLifespan"
      status="success"
      :width="60"
      style="margin-top: 4px; margin-left: 4px"
    >
      <template #default="{ percentage }">
        <div style="color: white; cursor: pointer">
          <span class="percentage-value">{{ percentage }}%</span>
          <span class="percentage-label"
            >{{
              item.partName == null || item.partName.length == 0
                ? '-'
                : item.partName.substring(0, 1)
            }}号机</span
          >
        </div>
      </template>
    </el-progress>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import type { PropType } from 'vue';
import { useRouter } from 'vue-router';
import { ElProgress } from 'element-plus';
import type { EquipmentLifespanDataItem } from './EquipmentLifespanDataItem';

export default defineComponent({
  name: 'EquipmentLifespan',
  props: {
    data: Array as PropType<Array<EquipmentLifespanDataItem>>, // 数据
    link: String, // 链接
    projectId: String
  },
  components: {
    ElProgress
  },
  setup(props) {
    const router = useRouter();
    const toRouterLink = (item: any) => {
      router.push({
        path: props.link,
        query: { partId: item.id, projectId: props.projectId }
      });
    };

    return {
      toRouterLink
    };
  }
});
</script>

<style scoped>
.percentage-value {
  display: block;
  font-size: 16px;
}

.percentage-label {
  display: block;
  font-size: 12px;
}
</style>